src/components/EventCalendar/EventCalendar.tsx (5)

138-156: Improve test coverage for error handling in filteredHolidays

The error handling logic within the filteredHolidays useMemo is not covered by tests. To ensure robustness and prevent potential issues with invalid holiday date formats, consider adding tests that trigger the catch block.

Would you like assistance in writing these tests or opening a new GitHub issue to track this task?

🧰 Tools

🪛 GitHub Check: codecov/patch

[warning] 145-145: src/components/EventCalendar/EventCalendar.tsx#L145
Added line #L145 was not covered by tests

---

[warning] 150-150: src/components/EventCalendar/EventCalendar.tsx#L150
Added line #L150 was not covered by tests

---

[warning] 152-152: src/components/EventCalendar/EventCalendar.tsx#L152
Added line #L152 was not covered by tests

---

145-152: Consider a more robust error logging strategy

Using console.error directly may not be ideal for production environments. Consider implementing a logging utility or service to handle errors more effectively and to avoid exposing error details to end users.

🧰 Tools

🪛 GitHub Check: codecov/patch

[warning] 145-145: src/components/EventCalendar/EventCalendar.tsx#L145
Added line #L145 was not covered by tests

---

[warning] 150-150: src/components/EventCalendar/EventCalendar.tsx#L150
Added line #L150 was not covered by tests

---

[warning] 152-152: src/components/EventCalendar/EventCalendar.tsx#L152
Added line #L152 was not covered by tests

---

326-326: Replace hard-coded index -100 with a constant

Using a hard-coded value like -100 can reduce code readability and maintainability. Define a meaningful constant to represent this special index value.

Suggested change:

+ const ALL_DAY_EVENTS_INDEX = -100;

...

<button
  className={styles.btn__more}
- onClick={() => toggleExpand(-100)}
+ onClick={() => toggleExpand(ALL_DAY_EVENTS_INDEX)}
>
  {expanded === ALL_DAY_EVENTS_INDEX ? 'View less' : 'View all'}
</button>

🧰 Tools

🪛 GitHub Check: codecov/patch

[warning] 326-326: src/components/EventCalendar/EventCalendar.tsx#L326
Added line #L326 was not covered by tests

---

346-349: Simplify date formatting with dayjs

Instead of manually parsing and formatting the holiday date, use dayjs for cleaner and more reliable date handling.

Suggested change:

<span className={styles.holiday_date}>
- {months[parseInt(holiday.date.slice(0, 2), 10) - 1]}{' '}
- {holiday.date.slice(3)}
+ {dayjs(holiday.date, 'MM-DD').format('MMMM D')}
</span>

---

Line range hint 582-586: Avoid duplicate rendering of components

The YearlyEventCalender and renderHours components are being rendered twice, which may cause unintended behavior or performance issues. Refactor the rendering logic to prevent duplicate component instantiation.

Suggested change:

      </div>

-     <div>
-       {viewType == ViewType.YEAR ? (
-         <YearlyEventCalender eventData={eventData} />
-       ) : (
-         <div className={styles.calendar__hours}>{renderHours()}</div>
-       )}
-     </div>

src/components/EventCalendar/EventCalendar.module.css (1)

481-493: Ensure CSS variables are defined and used consistently

The CSS variables introduced enhance maintainability, but ensure they are supported across all target browsers or provide fallbacks if necessary.

Configuration used: .coderabbit.yaml
Review profile: CHILL

src/components/EventCalendar/EventCalendar.module.css (1)

480-493: LGTM! Consider adding documentation for breakpoint variables.

The CSS variables are well-organized and promote consistency. The separation of concerns between colors, breakpoints, and spacing is clear.

Consider adding comments to document the intended use cases for the breakpoint variables:

  /* Holiday colors */
  --color-holiday-indicator: rgba(0, 0, 0, 0.15);
  --color-holiday-date: rgba(255, 152, 0, 1);
+ /* Breakpoints for responsive design */
  --mobile-breakpoint: 700px;      /* Tablet and mobile devices */
  --small-mobile-breakpoint: 480px; /* Small mobile devices */

src/components/EventCalendar/EventCalendar.tsx (3)

138-156: Add type safety to holiday filtering.

The holiday filtering implementation is well-optimized with useMemo and includes good error handling. However, it could benefit from stronger typing.

Consider adding type definitions:

+ interface Holiday {
+   date: string;
+   name: string;
+ }

  const filteredHolidays = useMemo(
    () =>
-     holidays?.filter((holiday) => {
+     holidays?.filter((holiday: Holiday) => {

---

Line range hint 582-590: Remove duplicate YearlyEventCalender rendering.

The YearlyEventCalender component is rendered twice: once inside the calendar__scroll div and again in a separate div below it. This could cause performance issues and unexpected behavior.

Remove the duplicate rendering:

- <div>
-   {viewType == ViewType.YEAR ? (
-     <YearlyEventCalender eventData={eventData} />
-   ) : (
-     <div className={styles.calendar__hours}>{renderHours()}</div>
-   )}
- </div>

---

335-376: Enhance calendar accessibility.

While ARIA labels are used for regions, additional accessibility improvements could be made for the calendar interface.

Consider these accessibility enhancements:

  <div className={styles.calendar_infocards}>
    <div
      className={styles.holidays_card}
      role="region"
      aria-label="Holidays"
+     tabIndex={0}
    >
-     <h3 className={styles.card_title}>Holidays</h3>
+     <h3 className={styles.card_title} id="holidays-title">Holidays</h3>
      <ul
+       aria-labelledby="holidays-title"
        className={styles.card_list}>

Also, ensure that color is not the only means of distinguishing between different types of events by adding text or icon indicators.

Configuration used: .coderabbit.yaml
Review profile: CHILL

- .holidays_card,
- .events_card {
-   flex: 1;
-   padding: 20px;
-   border-radius: 10px;
-   box-shadow: var(--card-shadow);
- }
-
- .holidays_card {
-   background-color: var(--holiday-card-bg);
- }
-
- .events_card {
-   background-color: white;
- }

+ /* Use the existing .base_card, .holidays_card, and .events_card classes defined earlier */

src/components/EventCalendar/EventCalendar.module.css (6)

279-280: Consider renaming .list_container to be more semantic

The class name could be more specific to its purpose, such as .event_indicator_container or .calendar_list_container, to better reflect its role in the UI.

---

320-321: Improve documentation format for breakpoint values

While documenting the breakpoint value is helpful, consider using a more standard JSDoc-style comment format:

-  /* --mobile-breakpoint: 768px */
+  /** @breakpoint --mobile-breakpoint: 768px */

---

349-364: Consider increasing shadow contrast for better visibility

The current box-shadow might be too subtle for some users. Consider increasing the opacity for better visibility:

- box-shadow: var(--card-shadow);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

---

440-445: Move color values to CSS variables

For consistency with other color management in the file, consider moving the rgba color to a CSS variable:

- background-color: rgba(139, 195, 74, 1);
+ background-color: var(--color-user-event);

Add to :root:

--color-user-event: rgba(139, 195, 74, 1);

---

480-494: Well-organized CSS variables with clear categorization

The CSS variables are well-structured and follow semantic naming conventions. Consider adding brief documentation for each category of variables.

 :root {
+  /* Color scheme for holiday-related elements */
   /* Holiday colors */
   --color-holiday-indicator: rgba(0, 0, 0, 0.15);
   --color-holiday-date: rgba(255, 152, 0, 1);

---

521-546: Consider adding hover states for interactive elements

The card components could benefit from hover states to improve user interaction feedback.

.card_list_item:hover {
  background-color: var(--hover-bg-color);
  transition: background-color 0.2s ease;
}

Configuration used: .coderabbit.yaml
Review profile: CHILL

src/components/EventCalendar/EventCalendar.module.css (4)

320-321: Remove redundant breakpoint comment

The comment /* --mobile-breakpoint: 768px */ is redundant since the value is now defined in the :root selector.

@media only screen and (max-width: var(--mobile-breakpoint)) {
-  /* --mobile-breakpoint: 768px */
  .event_list {

---

476-490: Consider using semantic color names

The color variables could be more semantic to better reflect their purpose. For example, --color-holiday-indicator could be --color-holiday-background.

:root {
  /* Holiday colors */
-  --color-holiday-indicator: rgba(0, 0, 0, 0.15);
-  --color-holiday-date: rgba(255, 152, 0, 1);
+  --color-holiday-background: rgba(0, 0, 0, 0.15);
+  --color-holiday-accent: rgba(255, 152, 0, 1);

---

500-516: Consider grouping media queries

For better maintainability, consider grouping all media queries at the end of the file. This makes it easier to manage responsive styles in one place.

---

517-542: Use more semantic class names

Consider using more semantic class names to better reflect the component hierarchy:

• card_title → calendar_card_title
• card_list → calendar_card_list
• card_list_item → calendar_card_item

This helps avoid potential naming conflicts in larger applications.

Configuration used: .coderabbit.yaml
Review profile: CHILL

- .holidays_card,
- .events_card {
-   flex: 1;
-   padding: 20px;
-   border-radius: 10px;
-   box-shadow: var(--card-shadow);
- }
-
- .holidays_card {
-   background-color: var(--holiday-card-bg);
- }
-
- .events_card {
-   background-color: white;
- }

src/components/EventCalendar/EventCalendar.tsx (1)

315-326: Extract "No events available" message to a constant

Consider extracting the message to a constant for better maintainability and potential internationalization.

+const NO_EVENTS_MESSAGE = 'No events available';

 {Array.isArray(allDayEventsList) &&
 allDayEventsList.length > 0 ? (
   expanded === -100 ? (
     allDayEventsList
   ) : (
     allDayEventsList.slice(0, 1)
   )
 ) : (
   <p className={styles.no_events_message}>
-    No events available
+    {NO_EVENTS_MESSAGE}
   </p>
 )}

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

-      <div>
-        {viewType == ViewType.YEAR ? (
-          <YearlyEventCalender eventData={eventData} />
-        ) : (
-          <div className={styles.calendar__hours}>{renderHours()}</div>
-        )}
-      </div>

 const filteredHolidays = useMemo(() => {
   if (!Array.isArray(holidays)) {
-    throw new Error('Invalid holidays array');
     return [];
   }

   return holidays.filter((holiday) => {
-    if (!holiday.date) {
-      console.warn(`Holiday "${holiday.name}" has no date specified.`);
-      return false;
-    }
-
     try {
-      if (holiday.date) {
+      if (!holiday.date) {
+        return false;
+      }
       const holidayMonth = dayjs(holiday.date, 'MM-DD', true).month();
       return holidayMonth === currentMonth;
-      } else {
-        console.warn(`Holiday "${holiday.name}" has no date specified.`);
-        return false;
-      }
     } catch (error) {
-      console.error(
-        `Error processing holiday "${holiday.name}": ${error instanceof Error ? error.message : 'Unknown error'}`,
-      );
       return false;
     }
   });
 }, [holidays, currentMonth]);

+// Move warnings outside the memoized function
+useEffect(() => {
+  if (!Array.isArray(holidays)) {
+    console.error('Invalid holidays array');
+    return;
+  }
+  
+  holidays.forEach(holiday => {
+    if (!holiday.date) {
+      console.warn(`Holiday "${holiday.name}" has no date specified.`);
+    }
+  });
+}, [holidays]);

src/components/EventCalendar/EventCalendar.tsx (1)

316-327: Improve conditional rendering logic.

The nested ternary operators make the code harder to read.

-{Array.isArray(allDayEventsList) &&
-allDayEventsList.length > 0 ? (
-  expanded === -100 ? (
-    allDayEventsList
-  ) : (
-    allDayEventsList.slice(0, 1)
-  )
-) : (
-  <p className={styles.no_events_message}>
-    {NO_EVENTS_MESSAGE}
-  </p>
-)}
+{!Array.isArray(allDayEventsList) || allDayEventsList.length === 0 ? (
+  <p className={styles.no_events_message}>{NO_EVENTS_MESSAGE}</p>
+) : expanded === -100 ? (
+  allDayEventsList
+) : (
+  allDayEventsList.slice(0, 1)
+)}

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

 const filteredHolidays = useMemo(() => {
   if (!Array.isArray(holidays)) {
-    throw new Error('Invalid holidays array');
+    console.error('Invalid holidays array');
+    return [];
   }

   return holidays.filter((holiday) => {
     if (!holiday.date) {
       console.warn(`Holiday "${holiday.name}" has no date specified.`);
       return false;
     }

     try {
-      if (holiday.date) {
-        const holidayMonth = dayjs(holiday.date, 'MM-DD', true).month();
-        return holidayMonth === currentMonth;
-      } else {
-        console.warn(`Holiday "${holiday.name}" has no date specified.`);
-        return false;
-      }
+      const holidayMonth = dayjs(holiday.date, 'MM-DD', true).month();
+      return holidayMonth === currentMonth;
     } catch (error) {
       console.error(
         `Error processing holiday "${holiday.name}": ${error instanceof Error ? error.message : 'Unknown error'}`,
       );
       return false;
     }
   });
 }, [holidays, currentMonth]);

src/components/EventCalendar/EventCalendar.tsx (1)

Remove unnecessary istanbul ignore comments and add missing test cases

The following code paths need test coverage:

1. Admin role logic in filterData function
2. Month transition in handlePrevMonth function
3. Event list expansion logic with holiday list conditions

Looking at the test file and ignored blocks, these scenarios can be tested with existing test infrastructure. The istanbul ignore comments should be removed as they are preventing proper coverage measurement.

Specific locations needing attention:

• Line 93: Admin role filtering logic
• Line 130: Month transition edge case
• Lines 502-507: Event list expansion with holiday list

🔗 Analysis chain

Line range hint 1-591: Improve test coverage to meet requirements

Several code paths are marked with istanbul ignore, which prevents proper test coverage. The PR comments indicate that code coverage needs to reach 100%.

Let's analyze the test coverage gaps:

---

Let me check the test file to understand what scenarios are not covered.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Find all istanbul ignore comments
rg -n "istanbul ignore" src/components/EventCalendar/EventCalendar.tsx

# Find test file to verify coverage
fd -g "*EventCalendar.test.*" src/

Length of output: 328

---

Script:

#!/bin/bash
# Check test file content
cat src/components/EventCalendar/EventCalendar.test.tsx

# Find the ignored code blocks
rg -A 5 -B 5 "istanbul ignore" src/components/EventCalendar/EventCalendar.tsx

Length of output: 14274

src/components/EventCalendar/EventCalendar.tsx (3)

Line range hint 281-337: Consider using a more descriptive expanded state value

Using magic numbers (-100) for expanded state makes the code less maintainable. Consider using an enum or constant for better readability.

Apply this diff:

+const enum ExpandedState {
+  COLLAPSED = -1,
+  ALL_DAY_EVENTS = -100
+}

-const [expanded, setExpanded] = useState<number>(-1);
+const [expanded, setExpanded] = useState<ExpandedState>(ExpandedState.COLLAPSED);

// Update the usage
-if (expanded === -100) {
+if (expanded === ExpandedState.ALL_DAY_EVENTS) {

---

344-385: Enhance accessibility for holiday and event cards

While the current implementation includes good accessibility features, it could be improved further.

Add these attributes to enhance screen reader support:

 <div
   className={styles.holidays_card}
   role="region"
   aria-label="Holidays"
+  aria-live="polite"
+  aria-atomic="true"
 >
   <h3 className={styles.card_title}>Holidays</h3>
-  <ul className={styles.card_list}>
+  <ul className={styles.card_list} aria-label="List of holidays">

---

417-420: Simplify className concatenation using template literals

The current implementation using array join could be simplified.

Consider using template literals for better readability:

-const className = [
-  date.getDay() === 0 || date.getDay() === 6 ? styles.day_weekends : '',
-  date.toLocaleDateString() === today.toLocaleDateString()
-    ? styles.day__today
-    : '',
-  date.getMonth() !== currentMonth ? styles.day__outside : '',
-  selectedDate?.getTime() === date.getTime() ? styles.day__selected : '',
-  styles.day,
-].join(' ');
+const className = `
+  ${styles.day}
+  ${date.getDay() === 0 || date.getDay() === 6 ? styles.day_weekends : ''}
+  ${date.toLocaleDateString() === today.toLocaleDateString() ? styles.day__today : ''}
+  ${date.getMonth() !== currentMonth ? styles.day__outside : ''}
+  ${selectedDate?.getTime() === date.getTime() ? styles.day__selected : ''}
+`.trim();

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

-      <div>
-        {viewType == ViewType.YEAR ? (
-          <YearlyEventCalender eventData={eventData} />
-        ) : (
-          <div className={styles.calendar__hours}>{renderHours()}</div>
-        )}
-      </div>

 const filteredHolidays = useMemo(() => {
   if (!Array.isArray(holidays)) {
-    throw new Error('Invalid holidays array');
+    return [];
   }

   return holidays.filter((holiday) => {
-    if (!holiday.date) {
-      console.warn(`Holiday "${holiday.name}" has no date specified.`);
-      return false;
-    }
-
     try {
-      if (holiday.date) {
+      if (!holiday.date) {
+        return false;
+      }
       const holidayMonth = dayjs(holiday.date, 'MM-DD', true).month();
       return holidayMonth === currentMonth;
-      } else {
-        console.warn(`Holiday "${holiday.name}" has no date specified.`);
-        return false;
-      }
     } catch (error) {
-      console.error(
-        `Error processing holiday "${holiday.name}": ${error instanceof Error ? error.message : 'Unknown error'}`,
-      );
       return false;
     }
   });
 }, [holidays, currentMonth]);
+
+// Move warnings outside useMemo to prevent affecting memoization
+useEffect(() => {
+  if (!Array.isArray(holidays)) {
+    console.error('Invalid holidays array');
+    return;
+  }
+  
+  holidays.forEach(holiday => {
+    if (!holiday.date) {
+      console.warn(`Holiday "${holiday.name}" has no date specified.`);
+    }
+  });
+}, [holidays]);

src/components/EventCalendar/EventCalendar.tsx (2)

316-327: Improve event list rendering logic

The nested ternary operators make the code harder to read. Consider extracting this logic into a separate function for better maintainability.

Consider refactoring to:

+ const renderEventList = (allDayEventsList: JSX.Element[]) => {
+   if (!Array.isArray(allDayEventsList) || allDayEventsList.length === 0) {
+     return <p className={styles.no_events_message}>{NO_EVENTS_MESSAGE}</p>;
+   }
+   return expanded === -100 ? allDayEventsList : allDayEventsList.slice(0, 1);
+ };

- {Array.isArray(allDayEventsList) &&
-   allDayEventsList.length > 0 ? (
-     expanded === -100 ? (
-       allDayEventsList
-     ) : (
-       allDayEventsList.slice(0, 1)
-     )
-   ) : (
-     <p className={styles.no_events_message}>
-       {NO_EVENTS_MESSAGE}
-     </p>
-   )}
+ {renderEventList(allDayEventsList)}

---

345-386: Verify accessibility of the new calendar info cards

The new holiday and events cards have good ARIA labels and roles, but consider adding more accessibility features:

1. Add aria-expanded to expandable sections
2. Consider adding keyboard navigation for the lists

Apply these accessibility enhancements:

  <div
    className={styles.holidays_card}
    role="region"
    aria-label="Holidays"
+   aria-expanded={expanded === -100}
  >
    <h3 className={styles.card_title}>Holidays</h3>
-   <ul className={styles.card_list}>
+   <ul className={styles.card_list} role="list">
      {filteredHolidays.map((holiday, index) => (
-       <li className={styles.card_list_item} key={index}>
+       <li 
+         className={styles.card_list_item} 
+         key={index}
+         role="listitem"
+         tabIndex={0}
+       >

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

  const filteredHolidays = useMemo(() => {
    if (!Array.isArray(holidays)) {
-     throw new Error('Invalid holidays array');
+     console.error('Invalid holidays array');
+     return [];
    }

    return holidays.filter((holiday) => {
      if (!holiday.date) {
        console.warn(`Holiday "${holiday.name}" has no date specified.`);
        return false;
      }

      try {
-       if (holiday.date) {
-         const holidayMonth = dayjs(holiday.date, 'MM-DD', true).month();
-         return holidayMonth === currentMonth;
-       } else {
-         console.warn(`Holiday "${holiday.name}" has no date specified.`);
-         return false;
-       }
+       const holidayMonth = dayjs(holiday.date, 'MM-DD', true).month();
+       return holidayMonth === currentMonth;
      } catch (error) {
        console.error(
          `Error processing holiday "${holiday.name}": ${error instanceof Error ? error.message : 'Unknown error'}`,
        );
        return false;
      }
    });
  }, [holidays, currentMonth]);

- <div>
-   {viewType == ViewType.YEAR ? (
-     <YearlyEventCalender eventData={eventData} />
-   ) : (
-     <div className={styles.calendar__hours}>{renderHours()}</div>
-   )}
- </div>

src/components/EventCalendar/EventCalendar.tsx (2)

139-165: 🛠️ Refactor suggestion

Simplify holiday filtering logic and improve error handling

The current implementation has redundant checks and could be simplified.

Apply this refactor to improve the code:

 const filteredHolidays = useMemo(() => {
   if (!Array.isArray(holidays)) {
-    throw new Error('Invalid holidays array');
+    console.error('Invalid holidays array');
+    return [];
   }

   return holidays.filter((holiday) => {
-    if (!holiday.date) {
-      console.warn(`Holiday "${holiday.name}" has no date specified.`);
-      return false;
-    }
-
     try {
-      if (holiday.date) {
+      if (!holiday.date) {
+        return false;
+      }
       const holidayMonth = dayjs(holiday.date, 'MM-DD', true).month();
       return holidayMonth === currentMonth;
-      } else {
-        console.warn(`Holiday "${holiday.name}" has no date specified.`);
-        return false;
-      }
     } catch (error) {
-      console.error(
-        `Error processing holiday "${holiday.name}": ${error instanceof Error ? error.message : 'Unknown error'}`,
-      );
       return false;
     }
   });
 }, [holidays, currentMonth]);
+
+// Move warnings outside the memoized function
+useEffect(() => {
+  if (!Array.isArray(holidays)) {
+    console.error('Invalid holidays array');
+    return;
+  }
+  
+  holidays.forEach(holiday => {
+    if (!holiday.date) {
+      console.warn(`Holiday "${holiday.name}" has no date specified.`);
+    }
+  });
+}, [holidays]);

---

585-591: ⚠️ Potential issue

Remove duplicate YearlyEventCalender rendering

The YearlyEventCalender component is rendered twice in the code, which could cause performance issues and unexpected behavior.

Remove the duplicate rendering:

-      <div>
-        {viewType == ViewType.YEAR ? (
-          <YearlyEventCalender eventData={eventData} />
-        ) : (
-          <div className={styles.calendar__hours}>{renderHours()}</div>
-        )}
-      </div>

src/components/EventCalendar/EventCalendar.tsx (2)

344-385: Enhance accessibility for calendar info cards

The implementation has good ARIA labels but could benefit from additional accessibility attributes.

Consider these accessibility enhancements:

 <div className={styles.calendar_infocards}>
   <div
     className={styles.holidays_card}
     role="region"
     aria-label="Holidays"
+    aria-live="polite"
   >
-    <h3 className={styles.card_title}>Holidays</h3>
+    <h3 className={styles.card_title} id="holidays-title">Holidays</h3>
-    <ul className={styles.card_list}>
+    <ul className={styles.card_list} aria-labelledby="holidays-title">
     {/* ... */}
     </ul>
   </div>
   
   <div 
     className={styles.events_card} 
     role="region" 
     aria-label="Events"
+    aria-live="polite"
   >
-    <h3 className={styles.card_title}>Events</h3>
+    <h3 className={styles.card_title} id="events-title">Events</h3>
     {/* ... */}
   </div>
 </div>

---

417-420: Simplify class name concatenation

The class name concatenation could be more concise using template literals.

Consider this improvement:

-date.toLocaleDateString() === today.toLocaleDateString()
-  ? styles.day__today
-  : '',
-date.getMonth() !== currentMonth ? styles.day__outside : '',
+`${date.toLocaleDateString() === today.toLocaleDateString() ? styles.day__today : ''}
+${date.getMonth() !== currentMonth ? styles.day__outside : ''}`

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro